{% extends 'base.html' %}

{% block ref %}
<link rel="stylesheet" charset="utf-8" href="/admin/style/publisher.css">
<link rel="stylesheet" charset="utf-8" href="/editor/themes/default/ueditor.css"/>

<script type="text/javascript" charset="utf-8" src="/editor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="/editor/editor_all.js"></script>
<script type="text/javascript" charset="utf-8" src="/admin/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/admin/script/timezone.js"></script>

<script>
function save()
{
    if(e.hasContents()){
        changed = false;
        data = {
            'title': $('#title').val(),
            'content': e.getContent(),
            'categories': $('#categories').val(),
            'tags': $('#tags').val(),
            'use-default-timezone': $('#use-default-timezone').attr('checked') ? 'true' : 'false',
            'timezone': $('#timezone').val(),
            'timezone-offset': $('#timezone-offset').val()
        };
        $.post(window.location.pathname, data)
            .success(function() { alert("second success"); })
            .error(function() { alert("error"); })
    }
}
function cancel()
{
    window.location = "http://{{ host }}/admin/";
}
function checkChanged()
{
    var s = "";
    var inputs = $("input[type='checkbox'][id^='category']");
    for(var i=0; i<inputs.length; i++){
        if(inputs[i].checked){
            s += inputs[i].attributes["value"].value + ","
        }
    }
    var categories = $("#categories")[0];
    categories.value = s;
}
function append(n, tag, value, attr)
{
    var e = document.createElement(tag);
    e.innerText = value;
    var s;
    for(s in attr){
        e.setAttribute(s, attr[s]);
    }
    n.appendChild(e);
}
function useDefaultTimezone()
{
    $('#timezone').attr('disabled', true);
    $('#timezone-offset').attr('disabled', true);
}
function useCustomTimezone()
{
    $('#timezone').attr('disabled', false);
    $('#timezone-offset').attr('disabled', false);
}
function onTimezoneOffsetChanged()
{
    var offset = $('#timezone-offset').val();

    var n = $('#timezone')[0];
    n.innerHTML = '';
    var tzs = timezones[offset];
    for(var i in tzs)
    {
        append(n, 'option', tzs[i], {});
    }
}
</script>
{% endblock %}

{% block content %}
<div id="content">
    <div class="pb-main-top clearfix">
        <div class="l">&nbsp;</div>
        <div class="r">&nbsp;</div>
    </div>
    <div class="pb-wrapper clearfix">
        <form id="form" method="post">
        <div id="pb-main">
            <h2 id="pb-main-title" class="clearfix">
                <span>编辑文字</span>
            </h2>
            <div id="pb-post-area">
                <div id="pb-text-title-holder" class="pb-post-section">
                    <h3 class="pb-section-title">标题<span>(可不填)</span></h3>
                    <input tabindex="1" type="text" id="title" name="title" class="pb-input-text" id="pb-text-title"
                            value="{{ article.Title }}">
                </div>
                <div id="pb-text-post-holder" class="pb-post-section">
                    <h3 class="pb-section-title">内容</h3>
                    <script type="text/plain" id="editor">{{ article.Content|safe }}</script>
                    <script type="text/javascript">
                        var option = {
                            toolbars:[['FullScreen', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'Superscript', 'Subscript', '|', 'ForeColor', 'BackColor', '|',
                            'RemoveFormat', 'FormatMatch','AutoTypeSet', 'pasteplain', '|', 'Link', 'Unlink', 'Anchor' , '|',
                            'InsertImage', 'InsertVideo', 'Attachment', 'Map', 'GMap','BlockQuote', 'HighlightCode', 'insertorderedlist', 'insertunorderedlist', '|',
							'FontFamily', 'FontSize', 'Paragraph', '|', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyJustify', '|',
							'Source', '|', 'Undo', 'Redo']],
                            wordCount:false,
                            elementPathEnabled:false,
                            textarea : 'content'
                        };
                        var changed = false;
                        var e = new baidu.editor.ui.Editor(option);
                        e.addListener('ready', function(){
                                e.addListener('contentchange', function(){
                                    changed = true;
                                });
                            }
                        );
                        e.render( "editor" );
                    </script>
                    <script type="text/javascript">
                        window.onbeforeunload = function(){
                            if(changed == true)
                                return ('内容已修改，尚未保存。确实要离开么？');
                        }
                    </script>
                </div>
                <div id="pb-timezone-holder" class="pb-post-section">
                    <h3 class="pb-section-title">时区设定</h3>
                    <label>
                        <input type="radio" id="use-default-timezone" name="use-default-timezone" checked="checked"
                               onchange="useDefaultTimezone()" value="true">
                        <span>使用缺省时区</span>
                    </label>
                    <label>
                        <input type="radio" name="use-default-timezone"
                               onchange="useCustomTimezone()" value="false">
                        <span>使用给定的时区</span>
                        <select id="timezone-offset" name="timezone-offset" disabled="true">
                        </select>
                        <select id="timezone" name="timezone" disabled="true">
                        </select>
                    </label>
                    <script type="text/javascript">
                        var cur_timezone = '{{ article.Timezone }}';
                        var cur_offset = '{{ article.TimezoneOffset }}';
                        var usedefault = {{ article.UseDefaultTimezone|lower }};

                        if(cur_offset == '')
                            cur_offset = '0';

                        var select_offset = $("#timezone-offset")[0];
                        for(var s in offsets){
                            append(select_offset, 'option', offsets[s], offsets[s] == cur_offset ? {"selected": "selected"}: {});
                        }

                        var select_timezone = $('#timezone')[0];
                        var tzs = timezones[cur_offset];
                        for(var s in tzs){
                            append(select_timezone, 'option', tzs[s], tzs[s] == cur_timezone ? {"selected": "selected"}: {});
                        }

                        select_offset.onchange = onTimezoneOffsetChanged;

                        if(!usedefault){
                            $('input:radio:[value=false]').each(function(){
                                this.checked = true;
                            });
                            useCustomTimezone();
                        }
                    </script>
                    <script type="text/javascript">
                    </script>
                </div>
            </div>

            <div id="pb-action-holder" class="clearfix">
                <div class="pb-submit">
                    <div onclick="save()" id="ctrlbuttonpb-submit" class="ui-button skin-button-willblue" style="width: 70px; ">
                        <span class="ui-button-bg-left skin-button-willblue-bg-left"></span>
                        <div id="ctrlbuttonpb-submitlabel" class="ui-button-label skin-button-willblue-label">
                            <span id="ctrlbuttonpb-submittext" class="ui-button-text skin-button-willblue-text">发布</span>
                        </div>
                    </div>
                </div>
                <div class="pb-preview">
                    <div id="ctrlbuttonpb-preview" class="ui-button skin-button-willlight" style="width: 70px; ">
                        <span class="ui-button-bg-left skin-button-willlight-bg-left"></span>
                        <div id="ctrlbuttonpb-previewlabel" class="ui-button-label skin-button-willlight-label">
                            <span id="ctrlbuttonpb-previewtext" class="ui-button-text skin-button-willlight-text">预览</span>
                        </div>
                    </div>
                </div>
                <div class="pb-cancel">
                    <div onclick="cancel()" id="ctrlbuttonpb-cancel" class="ui-button skin-button-willlight" style="width: 70px; ">
                        <span class="ui-button-bg-left skin-button-willlight-bg-left"></span>
                        <div id="ctrlbuttonpb-cancellabel" class="ui-button-label skin-button-willlight-label">
                            <span id="ctrlbuttonpb-canceltext" class="ui-button-text skin-button-willlight-text">取消</span>
                        </div>
                    </div>
                </div>
                <span id="pb-submiting-tip" style="display:none;">正在保存...</span>
            </div>
        </div>
        <div id="pb-aside">
            <div class="pb-aside-i">
                <div id="top-queue-holder">
                    <div class="separator noborder"></div>
                    <div class="pb-mod aside-item pb-side-opt">
                        <label>分类</label>
                    </div>
                    <div class="pb-mod aside-item pb-side-opt">
                        {% for i in categories %}
                            <div>
                                <label>
                                    <input type="checkbox" onclick="checkChanged()" id="category{{ forloop.counter0 }}" value="{{ i.Title }}"
                                        {% if i.Checked %}checked="checked"{% endif %}>{{ i.Title }}
                                </label>
                            </div>
                        {% endfor %}
                        <input type="hidden" id="categories" name="categories" value="{{ cats }}" />
                    </div>
                    <div class="separator"></div>
                    <div class="pb-mod aside-item pb-side-opt">
                        <label>标签</label>
                    </div>
                    <div class="pb-mod aside-item pb-side-opt">
                        <label>
                            <input type="text" id="tags" name="tags" value="{{ tags }}" />
                        </label>
                        <label>(多个标签以半角逗号隔开)</label>
                    </div>
                    <div class="separator"></div>
                    <div class="pb-mod aside-item pb-side-opt">
                        <label id="pb-set-private-holder">
                            <input type="checkbox" id="pb-set-private" name="hidden" {% if hidden %}checked="checked" {% endif %} />发布为隐私文章
                        </label>
                    </div>
                </div>
                <div id="pb-sync-holder" class="clearfix" style="display:none;position:relative;">
                    <div class="separator" id="pb-sync-sep"></div>
                </div>
            </div>
        </div>
        </form>
    </div>
</div>
{% endblock %}